<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 总结: vuejs是采取数据劫持结合发布者-订阅者模式的方式实现modelview的数据绑定，通过Object.defineProperty()或**Proxy**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的数据回调。 -->
    <p>
        用户名:
        <input type="text" id="text">
    </p>
    <div id="msg"></div>
    <script>
        var obj = {
            _val: '代紫航'
        };
        // 从数据到视图
        Object.defineProperty(obj, 'val', {
            get() {
                console.log('get获取');
                return this._val
            },
            set(newValue) {
                console.log('set设置');
                this._val = newValue;
                document.querySelector('#text').value = newValue;
                document.querySelector('#msg').innerText = newValue;
            }
        });
        // 初始视图
        document.querySelector('#text').value = obj.val;
        document.querySelector('#msg').innerText = obj.val;
        // 从视图到数据
        document.addEventListener('input', function(e) {
            // 数据更改
            obj.val = e.target.value;
        });
    </script>

</body>

</html>